<div class="main-content" >

  <!-- header section start-->
  <div class="header-section">

      <!--toggle button start-->
      <a class="toggle-btn"><i class="fa fa-bars"></i></a>
      <!--toggle button end-->

      <!--search start-->
      <form class="searchform" action="http://view.jqueryfuns.com/2014/4/10/7_df25ceea231ba5f44f0fc060c943cdae/index.html" method="post">
          <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
      </form>
      <!--search end-->

      <!--notification menu start -->
      <div class="menu-right">
          <ul class="notification-menu">
              <li>
                  <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                      <i class="fa fa-tasks"></i>
                      <span class="badge">8</span>
                  </a>
                  <div class="dropdown-menu dropdown-menu-head pull-right">
                      <h5 class="title">站点8条信息</h5>
                      <ul class="dropdown-list user-list">
                          <li class="new">
                              <a href="#">
                                  <div class="task-info">
                                      <div>Database update</div>
                                  </div>
                                  <div class="progress progress-striped">
                                      <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
                                          <span class="">40%</span>
                                      </div>
                                  </div>
                              </a>
                          </li>
                          <li class="new">
                              <a href="#">
                                  <div class="task-info">
                                      <div>Dashboard done</div>
                                  </div>
                                  <div class="progress progress-striped">
                                      <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-success">
                                          <span class="">90%</span>
                                      </div>
                                  </div>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <div class="task-info">
                                      <div>Web Development</div>
                                  </div>
                                  <div class="progress progress-striped">
                                      <div style="width: 66%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" role="progressbar" class="progress-bar progress-bar-info">
                                          <span class="">66% </span>
                                      </div>
                                  </div>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <div class="task-info">
                                      <div>Mobile App</div>
                                  </div>
                                  <div class="progress progress-striped">
                                      <div style="width: 33%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="33" role="progressbar" class="progress-bar progress-bar-danger">
                                          <span class="">33% </span>
                                      </div>
                                  </div>
                              </a>
                          </li>
                          <li>
                              <a href="#">
                                  <div class="task-info">
                                      <div>Issues fixed</div>
                                  </div>
                                  <div class="progress progress-striped">
                                      <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar">
                                          <span class="">80% </span>
                                      </div>
                                  </div>
                              </a>
                          </li>
                          <li class="new"><a href="">See All Pending Task</a></li>
                      </ul>
                  </div>
              </li>
              <li>
                  <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                      <i class="fa fa-envelope-o"></i>
                      <span class="badge">5</span>
                  </a>
                  <div class="dropdown-menu dropdown-menu-head pull-right">
                      <h5 class="title">信息</h5>
                      <ul class="dropdown-list normal-list">
                          <li class="new">
                              <a href="">
                                  <span class="thumb"><img src="/static/admin/images/photos/user1.png" alt="" /></span>
                                  <span class="desc">
                                    <span class="name">John Doe <span class="badge badge-success">new</span></span>
                                    <span class="msg">Lorem ipsum dolor sit amet...</span>
                                  </span>
                              </a>
                          </li>
                          <li>
                              <a href="">
                                  <span class="thumb"><img src="/static/admin/images/photos/user2.png" alt="" /></span>
                                  <span class="desc">
                                    <span class="name">Jonathan Smith</span>
                                    <span class="msg">Lorem ipsum dolor sit amet...</span>
                                  </span>
                              </a>
                          </li>
                          <li>
                              <a href="">
                                  <span class="thumb"><img src="/static/admin/images/photos/user3.png" alt="" /></span>
                                  <span class="desc">
                                    <span class="name">Jane Doe</span>
                                    <span class="msg">Lorem ipsum dolor sit amet...</span>
                                  </span>
                              </a>
                          </li>
                          <li>
                              <a href="">
                                  <span class="thumb"><img src="/static/admin/images/photos/user4.png" alt="" /></span>
                                  <span class="desc">
                                    <span class="name">Mark Henry</span>
                                    <span class="msg">Lorem ipsum dolor sit amet...</span>
                                  </span>
                              </a>
                          </li>
                          <li>
                              <a href="">
                                  <span class="thumb"><img src="images/photos/user5.png" alt="" /></span>
                                  <span class="desc">
                                    <span class="name">Jim Doe</span>
                                    <span class="msg">Lorem ipsum dolor sit amet...</span>
                                  </span>
                              </a>
                          </li>
                          <li class="new"><a href="">Read All Mails</a></li>
                      </ul>
                  </div>
              </li>
              <li>
                  <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                      <i class="fa fa-bell-o"></i>
                      <span class="badge">4</span>
                  </a>
                  <div class="dropdown-menu dropdown-menu-head pull-right">
                      <h5 class="title">提醒</h5>
                      <ul class="dropdown-list normal-list">
                          <li class="new">
                              <a href="">
                                  <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                  <span class="name">Server #1 overloaded.  </span>
                                  <em class="small">34 mins</em>
                              </a>
                          </li>
                          <li class="new">
                              <a href="">
                                  <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                  <span class="name">Server #3 overloaded.  </span>
                                  <em class="small">1 hrs</em>
                              </a>
                          </li>
                          <li class="new">
                              <a href="">
                                  <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                  <span class="name">Server #5 overloaded.  </span>
                                  <em class="small">4 hrs</em>
                              </a>
                          </li>
                          <li class="new">
                              <a href="">
                                  <span class="label label-danger"><i class="fa fa-bolt"></i></span>
                                  <span class="name">Server #31 overloaded.  </span>
                                  <em class="small">4 hrs</em>
                              </a>
                          </li>
                          <li class="new"><a href="">See All Notifications</a></li>
                      </ul>
                  </div>
              </li>
              <li>
                  <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                      <img src="images/photos/user-avatar.png" alt="" />
                      John Doe
                      <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                      <li><a href="#"><i class="fa fa-user"></i>信息</a></li>
                      <li><a href="#"><i class="fa fa-cog"></i>设置</a></li>
                      <li><a href="#"><i class="fa fa-sign-out"></i>退出</a></li>
                  </ul>
              </li>

          </ul>
      </div>
      <!--notification menu end -->

  </div>
  <!-- header section end-->


